<template>
	<view class="page__content">
		<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false"
			:hide-empty-view="hideEmptyView" :refresher-enabled="false" @contentHeightChanged="contentHeightChanged"
			:auto="false" :auto-clean-list-when-reload="false">
			<view class="common__box__child">

				<view class="common__box__child__card" v-for="(item, index) in dataList" :key="index"
					@click="openOtherRoute(item,'编辑')">
					<view class="common__box__child__card__top">
						<view class="common__box__child__card__top__left">
							<view class="common__box__child__card__top__left__title">
								<text>{{item.FProcessManName}}</text>
								<text style="margin: 0 4rpx;">|</text>
								<text>{{item.ProcedureName}}</text>
							</view>

						</view>

						<template v-if="props.tabIndex == 0 && item.Days > 24">
							<view class="common__box__child__card__top__right">
								<up-tag text="超期" type="error"></up-tag>
							</view>
						</template>
					</view>

					<view class="common__box__child__card__content">

						<view class="common__box__child__card__content__field">
							<view class="common__box__child__card__content__field__label">
								<text>报工单号：</text>
								<!-- <text>{{props.tabIndex == 0 ? '报工单号' : '派工单号'}}：</text> -->
							</view>

							<view class="common__box__child__card__content__field__value">
								<text>{{item.BGBillNO}}</text>
								<!-- <text>{{ props.tabIndex == 0 ? item.BGBillNO : item.JobBillNO }}</text> -->
							</view>
						</view>

						<view class="common__box__child__card__content__field">
							<view class="common__box__child__card__content__field__label">
								<text>工单编号：</text>
							</view>

							<view class="common__box__child__card__content__field__value" style="color: #40c716;"
								@click.stop="openOtherRoute(item,'工单编号')">
								<text>{{item.WoBillNO}}</text>
							</view>
						</view>

						<template v-if="item.JobBillNO">
							<view class="common__box__child__card__content__field">
								<view class="common__box__child__card__content__field__label">
									<text>派工单号：</text>
								</view>

								<view class="common__box__child__card__content__field__value">
									<text>{{item.JobBillNO}}</text>
								</view>
							</view>
						</template>

						<view class="common__box__child__card__content__field">
							<view class="common__box__child__card__content__field__label">
								<text>产品名称：</text>
							</view>

							<view class="common__box__child__card__content__field__value">
								<text>{{item.ProductCode}}</text>
							</view>
						</view>

						<view class="common__box__child__card__content__field">
							<view class="common__box__child__card__content__field__label">
								<text>计价方式：</text>
							</view>

							<view class="common__box__child__card__content__field__value">
								<text>{{item.PieceTime == 1 ? '计时' : '计件'}}</text>
							</view>
						</view>


						<view class="common__box__child__card__content__field">
							<view class="common__box__child__card__content__field__label">
								<text>单据日期：</text>
							</view>

							<view class="common__box__child__card__content__field__value">
								<text>{{uni.$utils.dateFormat(new Date(item.BillDate), 'Y-MM-dd hh:mm:ss')}}</text>
							</view>
						</view>

					</view>

				</view>
			</view>
		</z-paging>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted, computed, nextTick, getCurrentInstance, watch, defineEmits } from 'vue'
	// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
	import { onLoad, onReady, onShow, onUnload, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	// import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging";
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useUserStore, usePermissionStore, useTicketStore } from '@/store';
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();
	const ticketStore = useTicketStore();

	/** ---------- Props 与 Emits ---------- */
	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		filterConfig: {
			type: Object,
			default: {}
		}
	})
	const emit = defineEmits(['heightChanged'])

	/** ---------- 响应式变量 ---------- */
	const paging = ref<any>(null);
	// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
	// useZPaging(paging)
	const dataList = ref<any[]>([])
	const hideEmptyView = ref(true)
	let completeFunc = ref<any>(null)

	/** ---------- 监听 currentIndex 变化，懒加载 ---------- */
	watch(
		() => props.currentIndex,
		(newVal) => {
			// console.log(props.tabIndex);
			console.log(props.currentIndex);
			if (newVal === props.tabIndex) {
				nextTick(() => {
					setTimeout(() => {
						paging.value?.reload()
					}, 100)
				})
			}
		},
		{ immediate: true }
	)


	/** ---------- 查询分页数据 ---------- */
	const queryList = async (pageNo : number, pageSize : number) => {
		const params = {
			Pageindex: pageNo,
			PageSize: pageSize,
			Approve: props.tabIndex,
			...props.filterConfig
		}


		request({
			config: {
			},
			url: "XGD_DailyOutput",
			method: 'POST',
			data: params,
			success(ret : any) {
				// console.log(ret);
				if (ret.status == 200) {
					paging.value.complete(ret.data.ds);
					// ret.data.ds1[0].Total
					hideEmptyView.value = false;
					//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
					if (completeFunc.value) {
						completeFunc.value();
					}
				}
			}
		});


		// try {
		// 	// ⚠️ 替换为你的真实接口请求逻辑
		// 	const res = await (uni as any).$request.queryList(params)
		// 	paging.value?.complete(res.data.list)
		// 	hideEmptyView.value = false
		// 	// 调用父组件刷新回调
		// 	if (completeFunc.value) completeFunc.value()
		// } catch (err) {
		// 	paging.value?.complete(false)
		// 	if (completeFunc.value) completeFunc.value()
		// }
	}

	/** ---------- 组件内部事件 ---------- */
	// 
	const openOtherRoute = (data : any, str : string) => {
		switch (str) {
			case "工单编号":
				uni.navigateTo({
					url: '/st_ticket/page_ticket/ticket-infoPage' + '?WoOrderID=' + data.WoOrderID,
				})
				break;
			case "编辑":
				uni.navigateTo({
					url: '/st_ticket/page_work/work-create?FDailyOutputDeID=' + data.FDailyOutputDeID + '&Edit=' +
						'isEdit'
				})
				break;
			default:
				break;
		}

	}

	/** ---------- 外部可调用方法 ---------- */
	// 页面通知当前子组件刷新列表
	const reload = (func ?: () => void) => {
		completeFunc.value = func || null
		paging.value?.reload()
	}

	// 页面通知当前子组件加载更多数据
	const doLoadMore = () => {
		console.log("接收通知");
		paging.value?.doLoadMore()
	}

	// 页面通知当前子组件清除数据
	const clear = () => {
		paging.value?.clear()
		hideEmptyView.value = true
	}
	const sysDeviceInfo = mainStore.systemConfig.sysDeviceInfo;

	/** ---------- 列表高度变化 ---------- */
	const contentHeightChanged = (height : number) => {
		const finalHeight = dataList.value.length ? height : 0
		const minHeight = sysDeviceInfo.windowHeight - uni.upx2px(80)
		emit('heightChanged', Math.max(finalHeight, minHeight))
	}

	/** ---------- 暴露方法供父组件调用 ---------- */
	defineExpose({
		reload,
		doLoadMore,
		clear
	})
</script>

<style scoped lang="scss">
	.page__content {
		height: 100%;
		// overflow: auto;

		.common__box__child {
			padding: 15rpx;
		}
	}

	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>